<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view />
    </transition>
    <Select />
    <StudentSelect v-if="$store.state.dias.studentSelect.show" />
    <AnotherSelect v-if="$store.state.dias.anotherSelect.show" />
  </div>
</template>
<script>
import Select from './components/select.vue'
import StudentSelect from './views/home/attendance/sign/studentSelect'
import AnotherSelect from './views/home/attendance/sign/anotherSelect'
export default {
  name: "App",
  components:{Select,StudentSelect,AnotherSelect},
  data() {
    return {
      transitionName: ""
    };
  },
  watch: {
    $route(to, from) {
      const toDepth = to.path.split("/").length;
      const fromDepth = from.path.split("/").length;
      this.transitionName =
        toDepth < fromDepth
          ? "slide-right"
          : toDepth == fromDepth
            ? "hide-show"
            : "slide-left";
    }
  },
};
</script>
<style lang="scss">
html,
body {
  box-sizing: border-box;
  height: 100%;
}
#app {
  height: 100%;
  background-color: #fff;
  overflow: hidden;
  font-size: 14px;
  >div{
    height: 100%;
    color: #333;
  }
}

// .slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active{
//   transition: all .6s;
// }
// .slide-right-leave-to{
//   transform: translateX(100%);
//   opacity: 0;
// }
// .slide-left-leave-to{
//   transform: translateX(-100%);
//   opacity: 0;
// }
// .slide-left-enter-to,.slide-right-enter-to{
//   transform: translateX(0%);
//   opacity: 1;
// }

.slide-left-leave-active,.slide-left-enter-active,.slide-right-leave-active,.slide-right-enter-active{
  transition: all .6s;
}
.slide-left-leave-to{
  transform: translateX(-100%);
  opacity: 0;
}
.slide-right-leave-to{
  transform: translateX(100%);
  opacity: 0;
}
.slide-left-enter,.slide-left-leave,.slide-right-enter,.slide-right-leave{
  transform: translateX(0%);
}


.hide-show-leave-active,.hide-show-enter-active{
  transition: all .8s;
}
.hide-show-leave-to{
  transform: translateY(-100%);
  opacity: 0;
}
.hide-show-enter-to{
  transform: translateY(-100%);
  opacity: 1;
}
.hide-show-enter,.hide-show-leave{
  transform: translateY(0%);
}
</style>
